<template>
  <div class="table_main" :style="props.isstyle">
    <!-- :style="props.isstyle" -->
    <!-- :style="{ width: props.isstyle ? '100%' : '', height: props.isstyle ? '100%' : '' }" -->
    <div class="table_main_head" v-if="props.tableData?.tablename == '数据管理'">
      <div class="table_main_head_item" :class="activechaninde == item ? 'active_head_item' : ''"
        v-for="(item, index) in ['数据总览', '详细信息']" :key="index" @click="changeindex(item)">
        {{ item }}
      </div>
    </div>
    <Lefthead :headimg="props.tableimg" :headtext="props.tabletext" />

    <div v-if="props.tableData?.tablename == '数据管理'" class="table_main_cont">
      <TableLeft v-if="activechaninde != '数据总览'" :istree="props.istree" :activedata="props.activedata"
        :leftActiveLogIndex="props.leftActiveLogIndex" />
      <TableRight v-if="activechaninde != '数据总览'" style=" width:calc(100% - (330/16 * 1rem))"
        :issearchbtn="props.issearchbtn" :searchbtn="props.searchbtn" :istablerightbtn="props.istablerightbtn"
        :tablerightbtn="props.tablerightbtn" :istablecolbtn="props.istablecolbtn" :tablecolbtn="props.tablecolbtn"
        :tablerightfrom="props.tablerightfrom" :tablerightfromvalue="props.tablerightfromvalue"
        :tableData="props.tableData" />
      <Sjzl v-if="activechaninde == '数据总览'" />
    </div>
    <div v-else class="table_main_cont">
      <TableLeft v-if="props.isleft" :istree="props.istree" :activedata="props.activedata"
        :leftActiveLogIndex="props.leftActiveLogIndex" />
      <TableRight :style="{ width: props.isleft == true ? 'calc(100% - (330/16 * 1rem))' : '100%' }"
        :issearchbtn="props.issearchbtn" :issearch="props.issearch" :searchbtn="props.searchbtn"
        :istablerightbtn="props.istablerightbtn" :istableformbtn='props.istableformbtn'
        :tablerightbtn="props.tablerightbtn" :tableformbtn="props.tableformbtn" :istablecolbtn="props.istablecolbtn"
        :tablecolbtn="props.tablecolbtn" :tablerightfrom="props.tablerightfrom"
        :tablerightfromvalue="props.tablerightfromvalue" :tableData="props.tableData" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import Lefthead from '@/components/lefthead/index.vue'
import TableLeft from '@/components/table/components/tableLeft/index.vue'
import TableRight from '@/components/table/components/tableRight/index.vue'
import Sjzl from '@/components/table/components/sjzl/index.vue'
const props = defineProps({
  istableformbtn: {
    type: Boolean,
    default: false,
  },
  issearch: {
    type: Boolean,
    default: true,
  },
  isstyle: {
    type: String,
    default: ''
  },
  tableimg: {
    type: String,
    default: ''
  },
  tabletext: {
    type: String,
    default: ''
  },
  // true 显示 false 不显示
  isleft: {
    type: Boolean,
    default: false
  },
  // true 不是树状 false 是树状
  istree: {
    type: Boolean,
    default: false
  },

  // 左侧数据
  activedata: {
    type: Array,
    default: [
      {
        lable: '123',
        value: '123'
      },
      {
        lable: '456',
        value: '456'
      },
    ]
  },
  //
  leftActiveLogIndex: {
    type: String,
    default: ''
  },
  //
  issearchbtn: {
    type: Boolean,
    default: false
  },
  searchbtn: {
    type: Array,
    default: () => []
  },
  istablerightbtn: {
    type: Boolean,
    default: false
  },
  tablerightbtn: {
    type: Array,
    default: () => []
  },
  tableformbtn: {
    type: Array,
    default: () => []
  },


  tablerightfrom: {
    type: Object,
    default: () => { }
  },

  istablecolbtn: {
    type: Boolean,
    default: false
  },

  tablecolbtn: {
    type: Array,
    default: () => []
  },

  tablerightfromvalue: {
    type: Array,
    default: () => []
  },

  tableData: {
    type: Object,
    default: () => {

    }

  }

})


const activechaninde = ref('数据总览')
const changeindex = (item) => {
  activechaninde.value = item
}


onMounted(() => {


})
</script>

<style lang="less" scoped>
.table_main {
  width: 1850px;
  height: 87.5vh;
  background: rgba(21, 33, 86, 0.8);
  border-radius: 0px 4px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
  backdrop-filter: blur(3px);
  margin: 0 auto;


  .table_main_head {
    width: 265px;
    height: 38px;
    position: absolute;
    left: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .table_main_head_item {
      // width: 125px;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      padding: 2px 5px;
      text-align: center;
    }

    .active_head_item {
      color: #fff;
      font-weight: bold;
      border-bottom: 2px solid rgba(59, 222, 255, 1);
      position: relative;
    }

    .active_head_item::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 25px;
      background: url(../../assets/img/sjgl/borleft.png) no-repeat center;
      background-size: contain;
      vertical-align: middle;
      position: absolute;
      left: -10px;
      top: 5px;
    }

    .active_head_item::after {
      content: '';
      display: inline-block;
      width: 8px;
      height: 25px;
      background: url(../../assets/img/sjgl/borright.png) no-repeat center;
      background-size: contain;
      vertical-align: middle;
      position: absolute;
      right: -10px;
      top: 5px;
    }

  }

  .table_main_cont {
    margin: 20px 35px 26px 20px;
    display: flex;
    height: calc(100% - 92px);
  }
}
</style>